<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传头像</title>
    <style>
        .hidden {
            display: none;
        }
        .preview {
            width: 200px;
            height: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h2>图片上传</h2>
<form action="head.do" method="post" enctype="multipart/form-data">
    <input type="file" name="head" id="imageInput" class="hidden" accept="image/*">

    <!-- 修改用户的ID -->
    <input type="hidden" name="user_id" value="10001">

    <img id="imagePreview" class="preview"
         src="images/default.png"
         title="单击浏览上传图片"
         onclick="document.getElementById('imageInput').click();">

    <input type="submit" value="确定修改">
</form>

<script>
    // 监听文件域内容改变事件
    document.getElementById("imageInput").addEventListener("change", function(e) {
        // 获取文件引用
        var file = e.target.files[0];

        // 创建 FileReader 对象
        var reader = new FileReader();

        // 确定浏览合法的文件
        if (file) {
            // 读取文件为DataURL
            reader.readAsDataURL(file);

            // 文件读取成功完成后执行的回调函数
            reader.onloadend = function() {
                document.getElementById("imagePreview").src = reader.result;
            }
        }
    });

</script>
</body>
</html>